<script setup lang="ts">
import { FwbButton } from 'flowbite-vue';

const { createSession } = useChat();

const loading = ref(false);

// create new session and navigate
const onCreateSession = async (template_id?: string) => {
    try {
        loading.value = true;
        const { code, data: { session_id } } = await createSession(template_id);
        if (code === 0) {
            navigateTo(`/home/chat/${session_id}`);
        }
    }
    finally {
        loading.value = false;
    }
};
</script>

<template>
    <div class="py-8 w-full h-full bg-gradient-to-br from-theme/25 to-element/25">
        <div class="pt-24 pb-4 w-full h-full overflow-y-scroll flex flex-col gap-12 justify-evenly items-center">
            <h2 class="text-3xl leading-loose font-bold">Choose a template to start!</h2>
            <fwb-button class="rounded-full text-lg" gradient="cyan-blue" :disabled="loading" :loading="loading"
                @click="onCreateSession">
                Start Directly →
            </fwb-button>
            <ol class="grid grid-cols-2 gap-8">
                <home-chat-template-item v-for="i in 10" :key="i" />
            </ol>
        </div>
    </div>
</template>